<template>
  <div class="container">
    <div class="title">磁盘使用空间</div>
    <div class="progress-group">
      <div class="progress-box">
        <el-progress
          type="circle"
          :percentage="currentDetail.percentage"
          :stroke-width="20"
          :width="160"
          :color="colors"
        ></el-progress>
      </div>
      <div class="progress-title">目前存储使用率为{{currentDetail.sysusepre}}，还剩余 {{currentDetail.sys_spacefree}} 可供使用</div>
    </div>
    <div class="title" style="margin-top:20px;">文件类型占比</div>
    <div class="progress-group">
      <div class="progress-box" style="height: 400px;flex:1;min-width:400px;" id="main"></div>
      <div class="progress-title" style="flex:1;">
          <el-table
            :data="tableData"
            border
            ref="multipleTable"
            header-cell-class-name="table-header"
          >
            <el-table-column label="序号" width="55">
              <template slot-scope="scope">{{scope.$index+1}}</template>
            </el-table-column>
            <el-table-column label="类型" align="center">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column label="数量" align="center">
              <template slot-scope="scope">{{ scope.row.filenum }}</template>
            </el-table-column>
            <el-table-column label="空间大小" align="center">
              <template slot-scope="scope">{{ scope.row.space }}</template>
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import { Breadcrumb, BreadcrumbItem } from "element-ui";
import { getfilesize} from "@/utils/utils";
import * as echarts from "echarts";
export default {
  name: "news",
  components: {
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Breadcrumb.name]: Breadcrumb,
    [BreadcrumbItem.name]: BreadcrumbItem,
  },
  data() {
    return {
      imgPath: this.$API.AssetImagesUrl,
      isMobile: this.$isMobile,
      newsList: [],
      newsList1: [],
      currentDetail: {
        sysusepre:0,
        sys_spacefree:0,
        percentage:0
      },
      tableData:[],
      colors: [
        { color: "#1989fa", percentage: 75 },
        { color: "#f56c6c", percentage: 100 },
      ],
    };
  },
  created() {
    this.initAjaxMethod();
  },
  methods: {
    initAjaxMethod() {
      this.$http
        .post(this.$API.SYSTEM_INDEX, {})
        .then((res) => {
          if(res.code == 1){
            let list=Array.isArray(res.data.filetypearr)?res.data.filetypearr:[],arr=[];
            list.forEach(item=>{
              arr.push({
                value:parseFloat(item.filesize),
                name:item.title
              })
            })
            this.tableData=list;
            this.currentDetail={
              sysusepre:res.data.sysusepre,
              sys_spacefree:res.data.sys_spacefree,
              percentage:(parseFloat(res.data.sysusepre))
            }
            this.eacharts(arr);
          }
        })
    },
    eacharts(data) {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: "文件使用占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },

        series: [
          {
            name: "文件",
            type: "pie",
            radius: "50%",
            data:data,
            label: {
                show: true,
                position: "outside", //outside 外部显示  inside 内部显示
                formatter:(params)=>{
                  return  params.data.name+':'+getfilesize(params.data.value)+'('+params.percent+'%)'
                } ,
                fontSize: 12 //字体大小
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getDetail(index) {
      this.currentDetail = this.newsList[index];
      this.setAjaxMethod(this.newsList[index].id);
    },
    setAjaxMethod(id) {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http.post(this.$API.HOME_NEWS_NUM, { id: id }).then((res) => {
        console.log("news", res);
      });
    },
    gotoDetail(data) {
      let path = data.type == 0 ? "/news/newsDetail" : data.path;
      this.$location(data.type, path, { id: data.id });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
  .title {
    padding: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
  .progress-group {
    padding: 20px 40px;
    border: 1px solid #eee;
    border-radius: 6px;
    display: flex;
    align-content: center;
    align-items: center;
    .progress-title {
      padding-left: 8%;
      font-size: 16px;
      color: #333;
    }
  }
}
</style>


